<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  </head>
  <body>
    <!-- 根节点 -->
    <div id="app">
      <input type="text" v-model="msg" @keyup.enter="keydownFn" />
      <h1>未完成事件</h1>
      <template v-for="(item,index) in list" :key="item.id">
        <div>
          <input type="checkbox" v-model="item.checked" @change="checkedFn" />
          <span>{{item.text}}</span>
          <button @click="list.splice(index,1)">删除</button>
        </div>
      </template>

      <h1>已经完成事件</h1>
      <template v-for="(item,index) in finshList" :key="item.id">
        <div>
          <input type="checkbox" v-model="item.checked" />
          <span>{{item.finshText}}</span>
          <button @click="finshList.splice(index,1)">删除</button>
        </div>
      </template>
    </div>
    <script>
      const { createApp } = Vue;
      const app = createApp({
        // data存放响应式数据
        data() {
          return {
            msg: '',
            list: [
              {
                id: 1,
                text: '敲代码',
                checked: false,
              },
              {
                id: 2,
                text: '整理笔记',
                checked: false,
              },
            ],
            finshList: [
              {
                id: 1,
                finshText: '脑袋放空，提前进入放假模式',
                checked: true,
              },
            ],
          };
        },
        methods: {
          checkedFn() {
            this.list.forEach((item, index) => {
              if (item.checked) {
                this.finshList.push({
                  finshText: item.text,
                  checked: true,
                });
                this.list.splice(index, 1);
              }
            });
          },
          keydownFn() {
            this.list.push({
              id: this.list.length + 1,
              text: this.msg,
              checked: false,
            });
            this.msg = '';
          },
        },
        /*golbal Vue*/
      });
      // 挂载根节点
      app.mount('#app');
    </script>
  </body>
</html>
